<template>
	<div class="content">

		<!-- main -->
		<div class="main">
		<!-- 修改厂家信息model -->
			<!-- 表单 -->
			<el-dialog title="修改厂家信息" :modal="false" :visible.sync="editDialogManufacturer" width="38%" :before-close="handleeditClose">
			<el-form ref="form" :model="editManufacturerForm" label-width="96px" size="mini"
				v-loading="loading"
				element-loading-text="添加中..."
				element-loading-spinner="el-icon-loading"
			>
				<el-row :gutter="20">
				  <el-col :span="v.spanRows" type="flex" v-for="(v,i) in formType" :key="i">
					  <!-- input -->
					  <el-form-item v-if="v.type == 'input'" :label="v.label">
						<el-input :placeholder="v.placeholder" v-model="$data.editManufacturerForm[v.modelValue]" @input="iname(v,i)"
						 :disabled="v.disabled ? formdisabled : v.disabled"></el-input>
						<!-- <span >{{ v.tit }}</span> -->
					  </el-form-item>
					  <!-- select -->
					  <el-form-item v-if="v.type == 'select'" :label="v.label">
							<el-select v-model="$data.editManufacturerForm[v.modelValue]" :disabled="v.disabled ? addDisabled : v.disabled" filterable
								@focus="sname(v,i)" @change="scname" >
								<el-option v-for="item in $data[v.op]" :key="item.id" :label="item.label" :value="item.id"> 
								<span style="float: center; color: #8492a6; font-size: 12px">{{ item.label }}</span></el-option>
							</el-select>
					  </el-form-item>

					  <!-- 修改厂家信息 -->
					  <el-form-item v-if="v.type == 'table'" :label="v.label">
						<div style="display: flex;justify-content: space-between;background: #00557f;align-items: center;">
							<li style="list-style-type: none;margin-right: 12px;"><el-button v-for="(v,i) in boxaBtn" :key="i" :type="v.type" :icon="v.icon" size="medium" @click="boxaBtnHandClick(i)"></el-button></li>
						</div>
						<div class="table">
							<el-table :data="ManufacturerData" border align="center" style="width:868px;">
								<el-table-column fixed="left" label="行号" type="index" width="48"></el-table-column>
								<el-table-column v-for="(col, inx) in ManufacturerDataRows" :key="inx" :type="col.type" :prop="col.prop" :label="col.name"></el-table-column>
							</el-table>
						</div>
					  </el-form-item>
				  </el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button size="mini" @click="submitForm">修改</el-button>
				<el-button size="mini">取消</el-button>
			</div>
			</el-dialog>
		</div>
		<!-- feet -->
		<div class="feet">
			
		</div>
	</div>
</template>

<script>
// self  / props
import editDialogManufacturerType from './editDialogManufacturer.js'
// import addDialogManufacturer from './addDialogManufacturer.vue'
// selfs / js
import Pinyin from "@/external/pinyin.js"; //中译音
import minUnit from '@/external/minUnit.js' //模拟单位js
import unitDose from '@/external/unitDose.js' //模拟规格js
// 接口参数
import editManufactForm from "./addManufacturForm.js";
// 接口
import { getManufacturer } from "@/api/systemCatalogue/MedicenCata.js";
	export default {
		components: {
			editDialogManufacturerType
		},
		props: {
		    param: {
		      type: Object,
		      required: true
		    }
		},
		data() {
			return {
				//str
				methodName:'',
				toCodeNum:'0000000',//拼接自增 导零
				CodeNumber:'',//取长度
				//num
				pageNum: 1, //当前页currentPage
				pageSize: 8,
				totalSize: 10, //总条数
				//boolean
				editDialogManufacturer:false,
				disabled:false,
				formdisabled:true,
				loading:false,
				idx:'',
				ManufacturerDataRows:[
					{ name:"生产厂家", prop:"prodentpId", type:"" },{ name:"医保名称", prop:"chsName", type:"" },{ name:"有效状态", prop:"status", type:"" },
					{ name:"药典名称", prop:"pharmacopoeiaName", type:"" },{ name:"产地", prop:"origin", type:"" },
					{ name:"批准文号", prop:"manuLotnum", type:"" },{ name:"药品本位码", prop:"drugCode", type:"" },
					{ name:"自付比例", prop:"ratio", type:"" },{ name:"本地药品", prop:"localDrugs", type:"" },
					{ name:"中标等级", prop:"bidLv", type:"" },{ name:"中标次数", prop:"bidNum", type:"" },
					{ name:"条码值", prop:"barCode", type:"" },{ name:"备注", prop:"remark", type:"" },{ name:"集采中选", prop:"gatherBuyType", type:"" },
					{ name:"网采编码", prop:"netCode", type:"" },{ name:"YPID", prop:"ypid", type:"" }
				], //厂家rows
				// select => Options
				formType:[],
				ManufacturerOptions:[],
				localOptions:[{id:1,label:'是',value:'是'},{id:0,label:'否',value:'否'}], //本地药品
				StatusOptions:[{ id:0,label:'禁用',value:'禁用'},{ id:1,label:'可用',value:'可用'}], //有效状态
				gatherOptions:[{ id:1,label:'中选',value:'中选'},{ id:2,label:'非中选',value:'非中选'}], //集采中选
				originOptions:[{ id:1,label:'国产',value:'国产'},{ id:2,label:'进口',value:'进口'},{ id:3,label:'省内',value:'省内'}], //产地
				bidLevelOptions:[{ id:1,label:'国标',value:'国标'},{ id:2,label:'省标',value:'省标'},{ id:3,label:'市标',value:'市标'}], //中标等级
				//obj
				editManufacturerForm:{},
				
			}
		},
		mounted() {
			// console.log(this.editManufacturerForm,'最终要传的参数');
			// 左侧提交表单
			this.formType = editDialogManufacturerType.map(function(v) {
				return v
			})
		},
		updated(){
			// console.log(this.NameOptions);
			// if(this.ManufacturerOptions.length == 0){
			// 	this.getMatur();
			// 	console.log('进来更新就调厂家',this.ManufacturerOptions);
			// }else{
			// 	console.log('滚');
			// }
		},
		methods:{
			// 打开model
			openEditModel(data){
				this.editDialogManufacturer = true
				this.editManufacturerForm = editManufactForm.map(v => {return v })[0]; // Form
				this.editManufacturerForm = data[0]		
			},
			//  select聚焦
			async sname(v,i) {
				v.id = i;
				this.idx = i;
				console.log(i);
				// i event
				switch (i) {
					case 1:
					//  模糊搜索接口select函数
					this.getMatur();
					break;
				}
			},
			// 生成厂家
			async getMatur(){
				let res = await getManufacturer({
					// name: this.GenericName,
					pageNum: this.pageNum,
					pageSize: 188
				})	
				this.ManufacturerOptions = res.data.content.map(v=>{
					return { label: v.manufacturerName, ...v }
				})
			},
			// SelectVal to editManufacturerForm
			scname(v){
				
				// v.id = this.idx;
				// i event
				switch (this.idx) {
					case 1:
					// 字段映射
					
					// this.editManufacturerForm.manufacturerId = v.id //通用名赋值
					break;
					// case 1:
					// 	// 生产厂家 => 有效状态 Value键值对
					// 	this.editManufacturerForm.status = v.label
					// 	break;
					// case 5:
					// 	// 生产厂家 => 本地药品 Value键值对
					// 	this.editManufacturerForm.localDrugs = v.label
					// case 6:
					// 	// 生产厂家 => 中标等级 Value键值对
					// 	this.editManufacturerForm.bidLevel = v.label
					// case 9:
					// 	// 生产厂家 => 产地 Value键值对
					// 	this.editManufacturerForm.origin = v.label
					// case 11:
					// 	// 生产厂家 => 集采中选 Value键值对
					// 	this.editManufacturerForm.gather = v.label
					// 	break;
				}
			},
			// inputVal to editManufacturerForm
			iname(v,i){
				// console.log(v);
				i = v.id
				// i event
				switch (i) {
					case 2:
					// 字段映射
						// 第一个输入框为注册商标
						console.log('第一个输入框i=2的为注册商标');
						break;
					case 3:
						// 第二个输入框为批准文号
						console.log('第一个输入框i=3的为批准文号');
						break;
					case 4:
						// 第三个输入框为自付比例
						console.log('第三个输入框i=4的为自付比例');
						// this.drugAlias, //药品别名
						break;
					case 7:
						// 第四个输入框id=7的为条码值
						console.log('第四个输入框id=7的为条码值');
						break;
					case 8:
						// 第五个输入框id=8的为中标次数
						console.log('第五个输入框id=8的为中标次数');
						break;
					case 10:
						// 第六个输入框id=10的为药品本位码 
						console.log('第六个输入框id=10的为药品本位码 ');
						break;
					case 12:
						// 第七个输入框id=12的为网采编码
						console.log('第六个输入框id=12的为网采编码 ',this.editManufacturerForm);
						break;
					case 27:
						// 第27个输入框为ddd
						console.log('第27个输入框为ddd',v);
						// 传向父组件，指向submit
						// this.$emit('submit-Form',this.addForm)
						break;
					case 28:
						// 第28个输入框为来源分类
						console.log('第28个输入框为来源分类');
						break;
					case 29:
						// 第29个输入框为强度系数
						console.log('第29个输入框为强度系数');
						break;
					case 30:
						// 第30个输入框为来源分类
						console.log('第30个输入框为来源分类');
						break;
					case 32:
						// 第32个输入框为停药天数
						console.log('第32个输入框为停药天数');
						break;
					case 33:
						// 第33个输入框为来源分类
						console.log('第33个输入框为来源分类');
						break;
				}
			},
			handleMessage(mess) {
				 console.log('this.editManufacturerForm.id',mess);
			      this.editManufacturerForm.id = id;
			},
			// submit send editManufacturerForm to father 修改保存
			submitForm(){
				this.editManufacturerForm.id = this.aid;
				// 根据 manufacturerName绑定的id 找到对应的对象
				let nameObj = this.ManufacturerOptions.find(name => name.id === this.editManufacturerForm.prodentpId)
				console.log(nameObj);
				this.editManufacturerForm.manufacturerName = nameObj.label;
				// 设置一个定时器 用于传递成功后清空原数据源
				this.loading = true;
				this.disabled = true;
				setTimeout(() => {
					this.$emit('editManufacturer',this.editManufacturerForm)
					console.log(this.editManufacturerForm,'ttttttttttttttt');
					this.loading = false;
					this.$message({ message: '厂家信息已修改',type: 'success',duration: 2000});
					this.editDialogManufacturer = false;
				}, 1500)	
			},
			handleeditClose(done){
				done();
			}
			
		},
		computed: {
		   
		},
	}
</script>

<style lang="less" scoped>

	.content{
		
		.header{
			
		}
		// main
		.main{
			/deep/ .el-table{
				font-size: 12px !important;
			}
			.opRows{
				display: flex;
				justify-content: space-between;
				background-color: rebeccapurple;
			}
		}
		// feet
		.feet{
			display: flex;
			justify-content: right;
			padding-top: 12px;
		}
		
	}
</style>